<template>
  <div class="y-flex y-flex-col y-w-full y-h-full">
    <div class="y-flex y-flex-col y-flex-1 y-h-0 y-relative">
      <yyFormTablePagination ref="yyFormTablePaginationRef" :tableConfig="tableConfig" :formConfig="formConfig">
      </yyFormTablePagination>
    </div>
    <div class="y-text-center">
      <el-button size="small" type="primary" @click="handleConfirm">保存</el-button>
      <el-button size="small" @click="handleClose">关闭</el-button>
    </div>
  </div>
</template>

<script>
import { sexOptions, stateOptions } from "@/constant/defaultOptions.js";
import yyFormTablePagination from "@/components/yyFormTablePagination";
import { createLoading, createMessage } from "@/utils/index.js";
import { goBack } from "@/utils/browser.js";
export default {
  name: "system_role_roleRelationUser",
  components: { yyFormTablePagination },
  data() {
    return {
      tableConfig: {
        tableColumn: [
          { prop: "username", label: "账号" },
          { prop: "avatar", label: "头像", width: 88, img: true, avatar: true },
          { prop: "nickname", label: "昵称" },
          { prop: "phone", label: "手机号", width: 100 },
          { prop: "sex", label: "性别", tag: true, tagOptions: sexOptions },
          { prop: "state", label: "状态", tag: true, tagOptions: stateOptions },
        ],
        tableManagerColumn: [],
        tableApi: this.$globalApi.user.sysUserListApi,
        tableBingConfig: {
          reserveSelection: true,
        },
        tableAutoInit: false,
      },
      formConfig: {
        formColumn: [
          { component: "yyInput", prop: "username", label: "账号" },
          { component: "yyInput", prop: "nickname", label: "昵称" },
          { component: "yyInput", prop: "phone", label: "手机号" },
          {
            component: "yySelect",
            prop: "sex",
            label: "性别",
            options: sexOptions,
          },
          {
            component: "yySelect",
            prop: "state",
            label: "状态",
            options: stateOptions,
          },
        ],
      },
      formData: {
        id: "",
      },
    };
  },
  methods: {
    async handleConfirm() {
      const params = {
        roleId: this.formData.id,
        userIds: this.$refs?.yyFormTablePaginationRef?.getCheckKeys(),
      };
      const loading = createLoading("保存中，请稍等");
      try {
        await this.$globalApi.role.setRoleRelationUserApi(params);
        createMessage("保存成功", { type: "success" });
        this.$emit("refresh");
        goBack("/system/role");
      } catch (err) {
        console.log("更新报错了", err);
      } finally {
        loading.close();
      }
    },
    handleClose() {
      goBack("/system/role");
    },
    async init() {
      if (!this.formData.id) {
        this.handleClose();
        return;
      }
      const loading = createLoading("正在查询角色已关联用户信息，请稍等");
      try {
        const res = await this.$globalApi.role.getRoleRelationUserApi(
          this.formData.id
        );
        this.$refs.yyFormTablePaginationRef.setDefaultCorssPageMap(
          res?.map((c) => ({ id: c }))
        );
        this.$refs.yyFormTablePaginationRef.search();
      } catch (err) {
        console.log("查询失败了", err);
      } finally {
        loading.close();
      }
    },
  },
  mounted() {
    this.formData.id = this.$route.query.id;
    this.init();
  },
};
</script>

<style></style>